<template>
  <div>
    <!-- 头部 -->
    <div class="head">
      <div class="content">
        <img
          class="textimg"
          src="../../assets/Application/textfenfa.png"
          alt=""
        />

        <div class="circle">
          <div class="btns">
            <el-button
              type="primary"
              class="shop"
              @click="$router.push('/priceMoney')"
              >购买套餐</el-button
            >
            <el-button
              type="primary"
              class="upload"
              @click="$router.push('/uplodapp')"
              >上传文件</el-button
            >
          </div>
        </div>
      </div>
    </div>

    <!--底部 -->
    <div class="bottom">
      <!-- 搜索 -->
      <div class="search">
        <div>
          <el-select
            v-model="phoneModel"
            :placeholder="phoneModel"
            @change="onSelect"
          >
            <el-option
              v-for="item in phoneModelList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <el-input
            @change="onInput"
            class="seek"
            v-model="seek"
            style="width: 220px"
            placeholder="请输入应用名称"
            suffix-icon="el-icon-search"
          ></el-input>
        </div>
        <div class="info">
          <div class="item">
            <div>应用存储空间容量</div>
            <div class="red">
              <div>
                {{ userInfo.in_spaceuse }} / {{ userInfo.in_spacetotal }}
              </div>
            </div>
          </div>

          <div class="item">
            <div>下载点数</div>
            <div class="red">{{ userInfo.in_points }}</div>
          </div>

          <div class="item">
            <div>会员等级</div>
            <div class="red">{{ userInfo.in_svip }}</div>
          </div>
        </div>
      </div>

      <!-- 列表 -->
      <div class="list">
        <el-table
          :data="newTableData"
          style="width: 100%"
          :header-cell-style="{
            background: '#F4F7FF',
            color: '#7F84A5',
            textAlign: 'center',
          }"
        >
          <el-table-column
            prop="in_id"
            label="应用名称"
            align="center"
            width="250"
          >
            <template slot-scope="scope">
              <div class="appBox">
                <div class="appBoxLeft">
                  <img class="appLogo" :src="scope.row.in_icon" alt="" />
                </div>
                <div class="appBoxRight">
                  <div class="appBoxRight-top">
                    <i
                      class="appBoxRight-top-left"
                      @click="download(scope.row.in_link)"
                    >
                      {{ scope.row.in_name }}
                    </i>
                    <div class="appBoxRight-top-right">
                      <div
                        class="app-form"
                        v-if="scope.row.in_form === 'Android'"
                      >
                        <img
                          class="Android"
                          src="@/assets/Application/anzhuo-copy.svg"
                          alt=""
                        />
                      </div>
                      <div
                        class="app-form ios"
                        v-else-if="scope.row.in_form === 'iOS'"
                      >
                        IOS
                      </div>
                      <div class="app-form" v-else>企业</div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="in_downloads"
            label="下载次数"
            align="center"
            width="80"
          >
          </el-table-column>
          <el-table-column label="下载链接" align="center" width="350">
            <template slot-scope="scope">
              <div @click="download(scope.row.in_link)">
                https://oulakebei.fun/download/{{
                  userInfo.in_verify === 1 ? scope.row.in_link : "****"
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="in_applock"
            label="状态"
            align="center"
            width="80"
          >
          </el-table-column>
          <el-table-column prop="in_id" label="操作" align="center" width="400">
            <template slot-scope="scope">
              <el-button
                size="mini"
                class="blue-button"
                plain
                @click="skip(scope.row.in_id, 'message')"
                >查看</el-button
              >
              <el-button
                size="mini"
                class="blue-button"
                plain
                @click="skip(scope.row.in_id, 'merge')"
                >{{
                  scope.row.in_kid === null || scope.row.in_kid === 0
                    ? "合并"
                    : "解绑"
                }}
              </el-button>
              <el-button
                size="mini"
                class="blue-button"
                @click="onUpdate(scope.row.in_id, scope.row.in_name)"
                plain
                >更新</el-button
              >
              <el-button
                size="mini"
                class="blue-button"
                @click="download(scope.row.in_link)"
                plain
                >下载</el-button
              >
              <el-button
                size="mini"
                class="red-button"
                plain
                @click="onDel(scope.row.in_id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-row
        v-if="newTableData.length !== 0"
        style="height: 60px"
        align="middle"
        type="flex"
        justify="center"
      >
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { delApp, getAppList, appDown } from "@/api/App";
export default {
  data() {
    return {
      //手机机型列表
      phoneModelList: [
        {
          value: "全部",
          label: "全部",
        },
        {
          value: "Android",
          label: "安卓",
        },
        {
          value: "iOS",
          label: "IOS",
        },
      ],
      //手机机型
      phoneModel: "全部",
      //搜索
      seek: "",
      //免费下载次数
      free: 50,
      //付费下载次数
      pay: 0,
      //应用分发列表
      tableData: [],
      newTableData: [],
      //总页数
      total: 1, //后端没写total写死
      pageParams: { page: 1, limit: 99999 }, //请求数据
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user,
    }),
  },
  async created() {
    await this.ReSetUser();
    await this.getList();
  },
  methods: {
    ...mapActions(["ReSetUser"]),
    //切换页面
    changePage(newPage) {
      this.pageParams.page = newPage; // 赋值新页码
      this.getUser();
    },
    //下载
    async download(id) {
      window.open(`https://oulakebei.fun/download/${id}`, `_blank`);
    },
    //搜索
    onInput(value) {
      const regex = new RegExp(value, "i");

      if (this.phoneModel !== "全部") {
        this.newTableData = this.tableData.filter(
          (item) =>
            (regex.test(item.in_name) || regex.test(item.category)) &&
            item.in_form === this.phoneModel
        );
        return;
      }
      this.newTableData = this.tableData.filter(
        (item) => regex.test(item.in_name) || regex.test(item.category)
      );
    },
    //选择
    onSelect(value) {
      const regex = new RegExp(this.seek, "i");
      if (value === "全部") {
        if (this.seek) {
          this.newTableData = this.tableData.filter(
            (item) => regex.test(item.in_name) || regex.test(item.category)
          );
          return;
        }
        this.newTableData = this.tableData;
        return;
      }
      this.newTableData = this.tableData.filter(
        (item) =>
          (regex.test(item.in_name) || regex.test(item.category)) &&
          item.in_form === this.phoneModel
      );
    },

    //删除
    async onDel(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await delApp(id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getList();
          // window.location.reload();
          this.ReSetUser();
        })
        .catch(() => {
          // 用户点击取消按钮时的操作
          this.$message({
            type: "info",
            message: "已取消删除操作",
          });
        });
    },
    //更新
    onUpdate(id, name) {
      this.$router.push(`/uplodapp?id=${id}&witheName=${name}`);
    },
    //请求列表
    async getList() {
      let res = await getAppList(this.pageParams);
      this.tableData = res.data;
      //APP转格式
      this.tableData.forEach((item) => {
        const date = new Date(item.in_addtime * 1000);
        if (item.in_addtime !== null) {
          item.in_addtime = date.toLocaleString();
        }
      });
      this.newTableData = this.tableData;
      this.newTableData.reverse();
    },
    //查看/合并-跳转
    skip(id, page) {
      this.$router.push(`/appDetails/${id}/${page}`);
    },
  },
};
</script>

<style scoped lang="scss">
.red {
  margin-top: 10px;
  color: rgb(236, 79, 79);
  font-size: 18px;
}
.blue-button {
  background-color: transparent;
  color: #2c56ff;
  border-color: #2c56ff;
}

.red-button {
  background-color: transparent;
  color: #ff4c4c;
  border-color: #ff4c4c;
}

.applink {
  display: flex;
  justify-content: center;
  align-content: center;
}

.time {
  font-size: 14px;
  font-weight: 400;
  color: #9094aa;
}

.appBoxRight-top-left {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 7px;
  color: #000;
}

.Android {
  width: 16px;
}

.app-form {
  margin-left: 5px;
  padding: 0 5px 0 5px;
  color: #ffffff;
}

.ios {
  background-color: #3860f4;
}

.appBoxRight-top {
  display: flex;
}

.appBox {
  display: flex;
}

.appLogo {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  margin-right: 17px;
}

.list {
  width: 1162px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #eef0f6;
}

.seek {
  margin-left: 30px;
}

.search {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  height: 86px;
  align-items: center;
}

.head {
  height: 200px;
  background: url(../../assets/tfsign.png);
}

.content {
  width: 1200px;
  height: 200px;
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
}

.textimg {
  width: 290px;
  height: 62px;
  position: absolute;
  left: 0;
  bottom: 20px;
}

.btns {
  margin-top: 48px;
  text-align: center;
}

.shop {
  color: #2c56ff;
  background: #e3e9ff;
  margin-right: 20px;
}

.upload {
  background: #2c56ff;
  color: #ffffff;
}

.circle {
  position: absolute;
  right: 0;
  bottom: -220px;
  width: 480px;
  height: 320px;
  background: #fafbff;
  border-radius: 50%;
}
.info {
  display: flex;
  flex: 1;
  .item {
    width: 76%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #ddd;

    > * {
      height: calc(100% / 3);
    }

    &:last-child {
      border-right: none;
    }
    &:last-child::after {
      display: block;
      width: 0;
      height: calc(100% / 3);
      content: "";
    }
  }
}
</style>
